<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" class="demo-form-inline filter-container">
      <el-form-item prop="userType" label="账户类型">
        <el-select v-model="filters.userType">
         <el-option label="全部" :value="undefined"></el-option>
          <el-option v-for="item in consts.ACCOUNT_TYPE"
                      v-if="item.value != -1"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="userName"  label="账户名">
        <el-input v-model="filters.userName" placeholder="输入账户名"/>
      </el-form-item>
      <el-form-item label="UUID：" prop="deviceId">
        <el-input v-model="filters.deviceId"/>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="search">搜索</el-button>
    </el-form>
    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="center">
        <template slot-scope="{row}">
          {{row.userType | toConverter('ACCOUNT_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{row}">
          {{row.reallyName}}
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          {{row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="手机号归属地" align="center">
        <template slot-scope="{row}">
          {{row.phoneGeo}}
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center">
        <template slot-scope="{row}">
          {{row.platform | toConverter('DEVICE_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column label="UUID(设备编号)" align="center">
        <template slot-scope="{row}">
          {{row.deviceId}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="toRiskIpQuery(row)">查看IP</el-button>
          <!--<template v-if="row.isOverlap">-->
          <!--<router-link :to="{name: 'ip-overlay', query: {username: row.username}}">-->
          <!--<el-button type="text">是</el-button>-->
          <!--</router-link>-->
          <!--</template>-->
          <!--<template v-else>-->
          <!--否-->
          <!--</template>-->
        </template>
      </el-table-column>
    </el-table>

    <el-tip style="margin-top:30px;">PS：这里显示的都是有同设备的账户</el-tip>

    <div class="pagination-container">
     <el-pagination
              bordered
              layout="total, sizes, prev, next"
              :disabled="loading"
              @size-change="cursorGridSizeChange"
              @prev-click="cursorPrevClickChange"
              @next-click="cursorNextClickChange"
              :current-page="filters.page"
              :page-size="filters.size"
              :page-sizes="gridPageSize"
              :total="tableData.total">
            </el-pagination>
    </div>
  </div>
</template>

<script>
import { form, grid } from '@/build';

import {
  riskDeviceConflictListApi as listApi,
} from '@/services/api/risk';

export default {
  name: 'device-conflict',

  mixins: [form, grid],

  props: ['id'],

  data() {
    return {
      tableData: {
        items: [],
        total: 0,
      },
      filters: {
        userType: undefined,
        userName: undefined,
        deviceId: undefined,
      },
    };
  },

  mounted() {
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });

    // this.getAll();
  },
  methods: {
    toRiskIpQuery(data) {
      this.$router.push({
        path: '/risk/risk-ip-query',
        query: {
          userName: data.userName,
        },
      });
    },
    search() {
      if ((this.filters.userName == '' || this.filters.userName == undefined) && (this.filters.deviceId == '' || this.filters.deviceId == undefined)) {
        this.$message({
          type: 'warning',
          message: '请输入用户名或者设备号',
        });
        return false;
      }
      this.gridSearch();
    },
  },
};
</script>
